﻿import React, { useState, useEffect } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules'
import { SliderContainer } from './style'
import 'swiper/css'
import 'swiper/css/pagination'
import { IBannerList } from '@/pages/Recommend/store'

interface ISliderProp {
  bannerList: IBannerList
}

function Slider(props: ISliderProp) {
  // const [sliderSwiper, setSliderSwiper] = useState<Swiper | null>(null)
  const { bannerList } = props

  // useEffect(() => {
  //   if (bannerList.length && !sliderSwiper) {
  //     const sliderSwiper = new Swiper('.slider-container', {
  //       loop: true,
  //       autoplay: {
  //         delay: 3000,
  //         disableOnInteraction: false
  //       },
  //       pagination: { el: '.swiper-pagination' }
  //     })
  //     setSliderSwiper(sliderSwiper)
  //   }
  // }, [bannerList.length, sliderSwiper])

  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      {bannerList.map((slider, index) => {
        return (
          <SwiperSlide className="swiper-slide" key={slider.imageUrl + index}>
            <div className="slider-nav">
              <img
                src={slider.imageUrl}
                width="100%"
                height="100%"
                alt="推荐"
              />
            </div>
          </SwiperSlide>
        )
      })}
      <div className="swiper-pagination"></div>
    </Swiper>
  )
}

export default React.memo(Slider)
